
<template>
  <div>
    <div class="top">
      <div class="optin">
        <a href="javascript:;" class="test"
          ><i class="el-icon-upload"></i>上传
          <input type="file" @change="shangchuanFn" />
        </a>
        <el-button size="small" @click="creatFn">
          <i class="el-icon-folder-opened"></i>新建文件夹
        </el-button>
        <div class="search">
          <el-input size="small" placeholder="搜索文件" v-model="search_file">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchFile()"
            ></el-button>
          </el-input>
        </div>
      </div>
      <div class="progress">
        <el-progress
          v-show="progress"
          :percentage="percentage"
          color="#13ce66"
        ></el-progress>
      </div>
      <el-breadcrumb separator="/" style="margin-top: 20px">
        <el-breadcrumb-item>
          <a @click.prevent="toCommonFn">私人空间</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in urlpath" :key="item.title">
          <a @click.prevent="backwjFn(item.path, index)">{{ item.title }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box" @click.stop="hidemenu" v-loading="loading">
      <div
        :class="file_state_class[item.state]"
        v-for="item in pagelist"
        :key="item.name"
        @dblclick="openFn(item)"
        @contextmenu.prevent="rightClick($event, item)"
      >
        <div class="img">
          <img :src="require('../assets/' + item.imgtype + '.png')" />
          <span v-if="item.state !== 1">{{ file_state[item.state] }}</span>
        </div>
        <span>{{ item.title }}</span>
      </div>
      <div id="menu" class="options" v-show="options">
        <div @click="download"><i class="el-icon-download mg"></i>下载</div>
        <div @click="preview"><i class="el-icon-view mg"></i>预览</div>
        <div @click="fenxiangFn"><i class="el-icon-share mg"></i>分享</div>
        <div @click="info"><i class="el-icon-warning-outline mg"></i>属性</div>
        <div @click="move"><i class="el-icon-copy-document mg"></i>移动</div>
        <div @click="delFn"><i class="el-icon-delete mg"></i>删除</div>
      </div>
    </div>
    <el-dialog title="属性" :visible.sync="dialogVisible" width="30%">
      <div class="info">
        <div><span>文件名称:</span>{{ active.wjname }}</div>
        <div><span>类型:</span>{{ active.type }}</div>
        <div><span>文件路径:</span>{{ active.name }}</div>
        <div><span>文件大小:</span>{{ active.size }}</div>
        <div><span>创建日期:</span>{{ active.lastModified | filterDate }}</div>
        <!-- <div><span>上传者:</span>eren200</div> -->
      </div>
    </el-dialog>
    <el-dialog
      title="创建文件夹"
      :visible.sync="dialogVisibleCreat"
      width="20%"
    >
      文件夹名称： <el-input v-model="wjname"></el-input>
      <el-button style="margin-top: 10px" type="primary" @click="creatwjFn"
        >确 定</el-button
      >
    </el-dialog>
    <el-dialog title="分享链接" :visible.sync="dialogVisible11" width="30%">
      <span>{{ fxurl }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible11 = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="文件预览"
      :visible="showDoc == true || showPdf == true || showImg == true"
      :width="fileWidth"
      :before-close="closePreviewClick"
      class="dialog-div-pre-style"
      center
      append-to-body
    >
      <div v-if="showDoc == true">
        <iframe
          frameborder="0"
          :src="
            'https://view.officeapps.live.com/op/view.aspx?src=' + this.fileUrl
          "
          width="100%"
          height="800px"
        >
        </iframe>
      </div>
      <div
        v-else-if="showPdf == true"
        style="justify-content: center; align-items: center"
      >
        <embed :src="pdfUrl" style="width: 100%; height: 80vh" />
      </div>
      <div
        v-else-if="showImg == true"
        style="
          justify-content: center;
          align-items: center;
          min-width: 40px;
          min-height: 40px;
        "
      >
        <img :src="imagesUrl" alt="" style="width: 100%; height: auto" />
      </div>
    </el-dialog>

    <move ref="move" :filedir="base_file"></move>
  </div>
</template>

<script>
// import axios from "axios";
import move from "@/components/Move";
import {mapState} from "vuex";
export default {
  components: { move },
  data() {
    return {
          file_state: {
        0: "等待审核",
        1: "审核已通过",
        2: "审核未通过",
        3: "未知状态",
      },
      file_state_class: {
        0: "item item1",
        1: "item",
        2: "item item1",
        3: "item item1",
      },
      percentage: 0,
      progress: false,
      xhr: new XMLHttpRequest(),
      options: false,
      active: "",
      dialogVisible: false,
      dialogVisibleCreat: false,
      dialogVisible11: false,
      fxurl: "",
      pagelist: "",
      loading: false,
      urlpath: [],
      wjname: "",
      search_file: null,

      // 文件预览
      showDoc: false,
      showPdf: false,
      showImg: false,
      fileUrl: "",
      imagesUrl: "",
      pdfUrl: "",
      // dialog宽
      fileWidth: "min-width = 300px",
    };
  },
  computed: {
     ...mapState(["userId"]),
    base_file() {
      return this.userId + "/";
    },
  },
  created() {
    this.getwjlist(this.base_file);
  },
  methods: {
    move() {
      this.$refs.move.open(this.active.name);
    },
    preview() {
      this.$https
        .get("/common/preview", { params: { fileName: this.active.name } })
        .then((res) => {
          let url = res.data;
          if (
            url.indexOf("doc") != -1 ||
            url.indexOf("docx") != -1 ||
            url.indexOf("xsl") != -1 ||
            url.indexOf("xlsx") != -1 ||
            url.indexOf("ppt") != -1
          ) {
            this.fileWidth = "80%";
            this.showDoc = true;
            this.fileUrl = url;
          } else if (url.indexOf("pdf") != -1) {
            this.fileWidth = "80%";
            this.pdfUrl = url;
            this.showPdf = true;
          } else if (
            url.indexOf("jpg") != -1 ||
            url.indexOf("png") != -1 ||
            url.indexOf("jpeg") != -1
          ) {
            this.showImg = true;
            this.imagesUrl = url;
            let image = new Image();
            image.src = url;
            image.onload = () => {
              this.fileWidth = image.width + "px";
            };
          } else {
            this.$message("当前文件暂不支持预览");
          }
        });
    },
    closePreviewClick() {
      if (this.showDoc == true) {
        this.showDoc = false;
      } else if (this.showPdf == true) {
        this.showPdf = false;
      } else if (this.showImg == true) {
        this.showImg = false;
      }
    },
    searchFile() {
      if(!this.search_file){
        this.$message.error('请输入文件名')
        return
      }
      let dir;
      if (this.urlpath.length == 0) {
        dir = this.base_file;
      } else {
        dir = this.urlpath[this.urlpath.length - 1].path;
      }
      this.$https
        .get("/common/search", { params: { dir, fileName: this.search_file } })
        .then((res) => {
          this.loading = false;
          this.pagelist = res.data;
        });
    },
    getwjlist(dir) {
      this.loading = true;
      this.$https.get("/common/getall", { params: { dir } }).then((res) => {
        this.loading = false;
        this.pagelist = res.data;
      });
    },

    toCommonFn() {
      this.urlpath = [];
      this.getwjlist(this.base_file);
    },
    backwjFn(path, index) {
      this.urlpath.splice(index + 1, this.urlpath.length);
      this.getwjlist(path);
    },
    rightClick(e, item) {
      if (item.state === 0) {
        this.$message({
          type: "error",
          message: "等待审核",
        });
      } else if (item.state === 1) {
        this.active = item;
        this.options = true;
        this.options = true;
        let menu = document.querySelector("#menu");
        menu.style.top = e.screenY - 100 + "px";
        menu.style.left = e.screenX + "px";
      } else if (item.state === 2) {
        this.$message({
          type: "error",
          message: "未通过文件审核",
        });
      } else if (item.state === 3) {
        this.$message({
          type: "error",
          message: "文件审核状态异常,请联系管理员",
        });
      }
    },
    rightClick(e, item) {
      if (item.state === 0) {
        this.$message({
          type: "error",
          message: "等待审核",
        });
      } else if (item.state === 1) {
        this.active = item;
        this.options = true;
        this.options = true;
        let menu = document.querySelector("#menu");
        menu.style.top = e.screenY - 100 + "px";
        menu.style.left = e.screenX + "px";
      } else if (item.state === 2) {
        this.$message({
          type: "error",
          message: "未通过文件审核",
        });
      } else if (item.state === 3) {
        this.$message({
          type: "error",
          message: "文件审核状态异常,请联系管理员",
        });
      }
    },
    openFn(item) {
      if (item.state === 0) {
        this.$message({
          type: "error",
          message: "等待审核",
        });
      } else if (item.state === 1) {
        if (item.imgtype == "wjj") {
          let name = item.name;
          this.getwjlist(name);
          this.urlpath.push({ title: item.title, path: item.name });
        }
      } else if (item.state === 2) {
        this.$message({
          type: "error",
          message: "未通过文件审核",
        });
      } else if (item.state === 3) {
        this.$message({
          type: "error",
          message: "文件审核状态异常,请联系管理员",
        });
      }
    },
    hidemenu() {
      this.options = false;
    },
    download() {
      this.$https
        .get("/common/down", {
          params: { name: this.active.name, title: this.active.title },
        })
        .then((res) => {
          this.openDownload(res.data.url, this.active.title);
        });
    },
    fenxiangFn() {
      this.$https
        .get("/common/down", {
          params: { name: this.active.name, title: this.active.title },
        })
        .then((res) => {
          if (res.code == 200) {
            this.dialogVisible11 = true;
            this.fxurl = `${res.data}&title=${this.active.title}`;
          }
        });
    },
    openDownload(url, name) {
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", name);
      document.body.appendChild(link);
      link.click();
    },
    creatFn() {
      this.dialogVisibleCreat = true;
    },
    creatwjFn() {
      let dir;
      if (this.urlpath.length == 0) {
        dir = this.base_file;
      } else {
        dir = this.urlpath[this.urlpath.length - 1].path;
      }
      this.$https
        .get("/common/creat", { params: { dir, name: this.wjname } })
        .then((res) => {
          if (res.code == 200) {
            this.getwjlist(dir);
            this.dialogVisibleCreat = false;
          }
        });
    },
    delFn() {
      let dir = "";
      if (this.urlpath.length == 0) {
        dir = this.base_file;
      } else {
        dir = this.urlpath[this.urlpath.length - 1].path;
      }
      this.$https
        .get("/common/delete", { params: { dir: this.active.name } })
        .then((res) => {
          if (res.code == 200) {
            this.getwjlist(dir);
          }
        });
    },
    info() {
      this.dialogVisible = true;
    },
    shangchuanFn(e) {
      let dir;
      if (this.urlpath.length == 0) {
        dir = this.base_file;
      } else {
        dir = this.urlpath[this.urlpath.length - 1].path;
      }
      var file = e.target.files[0];

      // let file = e.target.files[0];
      this.$https.get("/common/getpolicy", { params: { dir } }).then((res) => {
        res = res.data;
        let param = new FormData(); // 创建form对象
        param.append("OSSAccessKeyId", res.OSSAccessKeyId);
        param.append("policy", res.policy);
        param.append("key", res.startsWith + file.name);
        param.append("success_action_status", 200);
        param.append("signature", res.signature);
        param.append("file", file, file.name);
        this.progress = true;
        this.xhr.open("post", "https://" + res.host, true);
        this.xhr.upload.addEventListener(
          "progress",
          this.progressFunction,
          false
        ); //调用方法监听上传进度
        this.xhr.onload = () => {
          this.$https
            .post("/common/examine", {
              name: this.userId,
              path: dir,
              file_name: file.name,
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "上传完成,等待审核",
              });
              this.progress = false;
              this.percentage = 0;
              this.getwjlist(dir);
            });
        };
        this.xhr.send(param);
      });
    },
    progressFunction(event) {
      if (event.lengthComputable) {
        var percent = Math.floor((event.loaded / event.total) * 100);
        if (percent > 100) {
          percent = 100;
        }
        this.percentage = percent;
      }
    },
    refUpload() {
      //关闭上传事件
      this.xhr.abort();
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  margin-left: 20px;
}
.test {
  position: relative;
  display: inline-block;
  background: #4d97ff;
  // border: 1px solid #99d3f5;
  border-radius: 1px;
  padding: 5px 12px;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
  margin-right: 20px;
}
.test input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
.test:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
.top {
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #e2e2e2;
  background-color: #fff;
  position: fixed;
  top: 80px;
  .optin {
    display: flex;
    align-items: center;
  }
}
.box {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  min-height: 70vh;
  padding-top: 10px;
  .item {
    margin: 20px;
    padding: 20px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    border-radius: 5px;
    color: rgb(102, 102, 102);
    font-size: 14px;
    cursor: pointer;
    .img {
      position: relative;
      img {
        width: 90px;
        height: 90px;
      }
      span {
        position: absolute;
        left: 5px;
        top: 40px;
      }
    }

    &:hover {
      background-color: rgba(179, 179, 179, 0.333);
    }
  }
  .item1 {
    .img {
      img {
        opacity: 0.4;
        filter: alpha(opacity=60);
      }
      span {
        color: rgb(190, 64, 64);
      }
    }
    &:hover {
      background-color: rgba(255, 0, 0, 0.333);
      cursor: no-drop;
      cursor: not-allowed;
    }
  }
}
.options {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100px;
  background-color: #fff;
  box-shadow: 0 0 5px #cecece;
  border-radius: 10px;
  padding: 10px 0;
  div {
    padding: 10px;
    cursor: pointer;
    .mg {
      margin-right: 15px;
    }
    &:hover {
      background-color: #4d97ff;
      color: #fff;
    }
  }
}
.progress {
  margin-top: 10px;
  width: 300px;
}
.info {
  div {
    padding: 10px 0;
    color: #000;
    span {
      display: inline-block;

      font-weight: bold;
    }
    :nth-child(1) {
      margin-right: 10px;
    }
  }
}
</style>
